<template>
	<scroll-view  :scroll-y="true" :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(list,key) in modData" :class="list.mod_class" :key="key" :style="list.css">
			<moxi-index v-if="list.name=='plugin_info_ranking'" :list="list" >
		<view class="con">
			<view class="bottom">
				<view class="bottom-con">
					<view class="bottom-list" @click="navto('plugin_info/industry?id='+list.id)"
					:style="{background: getBg(k)}" v-for="(list,k) in data">
						<view class="con-top">
							<view class="con-num">
								<!-- #ifdef H5 -->
								<view class="icon" style="left: 0" v-if="k<3">
									<u-icon name="bookmark-fill" size="40" :color="getColor(k)" ></u-icon>
								</view>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<view class="icon" style="left: -15px" v-if="k<3">
									<u-icon name="bookmark-fill" size="40"
									 :color="getColor(k)" ></u-icon>
								</view>
								<!-- #endif -->
								
									
								<text :style="k<3?'color: #fff':''">{{k+1}}</text>
							</view>
							<img :src="list.logo">
							 <view class="company">
								 <h4 class="company_name">{{list.name}}</h4>
								 <view class="company_city">{{list.province}} - {{list.city}}</view>
							 </view>
						</view>
						<view class="con-bottom" v-if="list.operate&&list.operate.length&&(ranking.operate&&ranking.operate==1)">
							{{list.operate}}
						</view>
					</view>
				</view>
			</view>
		</view>
		</moxi-index>
		<moxi-index v-else :list="list"></moxi-index>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					id:0
				},
				data:[],
				ranking:{}
			}
		},
		onLoad(){
			if (this.param.id) {
				this.info.id = this.param.id
			}
			this.get()
		},
		methods: {
			get(){
				this.moxiPost('/plugin/info/index/info/get_ranking', this.info, (data)=> {
					this.data = data.data;
					if(data.ranking){
						this.$set(this,'ranking',data.ranking);
					}
				})
			},
			getColor(k){
				if(k==0){
					return '#ff557f';
				}else if(k==1){
					return '#ffaa00';
				}else{
					return '#9d9d79';
				}
			},
			getBg(k){
				if(k==0){
					return 'linear-gradient(to bottom,#faf9f9,#ffe4e4)';
				}else if(k==1){
					return 'linear-gradient(to bottom,#faf9f9,#ffe8d4)';
				}else if(k==2){
					return 'linear-gradient(to bottom,#faf9f9,#ddeaff)';
				}else{
					return 'linear-gradient(to bottom,#faf9f9,#f0f2f5)';
				}
			}
		}
	}
</script>

<style>
	.icon{
		position: absolute;left: 0;top: 0;text-align: left;
	}
	.con-num text{
		position: absolute;left: 15px;top: 7px;color: #555;font-weight: 600;
	}
	.con-bottom{
		background: #fff;max-height: 40px;border-radius: 5px;margin: 15px 10px 0 10px;
		font-size: 12px;color: #666;display: flex;padding:10px;
	}
	.company_city{font-size: 13px;color: #666;}
	.company_name{
		color: #555;font-size: 15px;margin-bottom: 10px;margin-top: 1px;
	}
	.company{
		margin-left: 10px;
	}
	.con-num{
		color: red;width: 50px;margin-top: 4px;position: relative;
	}
	.con-top{
		display: flex;flex-direction: row;
	}
	.con-top img{border-radius: 100px;width: 50px;height: 50px}
	.bottom-list{
		padding: 20px 5px;background: linear-gradient(to bottom,#faf9f9,#ffe4e4);
		border-radius: 4px;margin: 10px 0;display: flex;flex-direction: column;
		
	}
	.bottom-con{
		padding: 15px;display: flex;flex-direction: column;
	}
	.bottom{
		width: 100%;flex: 1;background-color: #fff;
	}
.con{
	display: flex;flex-direction: column;
}

</style>
